<script setup lang="js">
import { onMounted, reactive, ref, defineAsyncComponent } from 'vue'
import { NAlert } from 'naive-ui'
import { setItem, getItem } from './utils'

const isGetSafetyScore = ref(false)
const isSafe = ref(false)
const hide = ref(true)
const safetyScore = () => {
  fetch('https://prod.rtymgt.com/api/v2/respondents/search/17e35a70-ff61-44b2-a33f-c5757f587bf5', {
    referrerPolicy: 'same-origin',
    body: null,
    method: 'GET',
    mode: 'cors',
    credentials: 'omit',
  })
    .then(async (res) => {
      let result = await res.json()
      console.log('result: ', result)
      if (result.Respondent && result.Respondent.threat_potential_score <= 30) {
        isSafe.value = true
        hide.value = true
      } else {
        isSafe.value = false
        hide.value = false
      }
      setItem('isGetSafetyScore', true)
      localStorage.setItem('safetyScore', JSON.stringify(result.Respondent))
    })
    .catch((err) => {
      console.log('err: ', err)
    })
}

onMounted(() => {
  // 读取数据
  // if (location.host.includes('rx.sampleglobal.io') || location.href.includes('https://cluster.marketxcel.co.in/survey/home')) {
  //   getItem('isGetSafetyScore').then((value) => {
  //     if (!value) {
  //       safetyScore()
  //     }
  //   })
  // }
})
</script>

<template>
  <main id="kk-container" class="kk-container" :class="{ kkhide: hide }">
    <div v-if="isSafe">
      <n-alert title="低风险环境" type="success" closable> </n-alert>
    </div>
    <div v-else>
      <n-alert title="高风险环境" type="error" closable> </n-alert>
    </div>
  </main>
</template>
<style>
.kk-container {
  position: fixed;
  z-index: 9999;
  background-color: aliceblue;
  right: 0;
  top: 0;
  min-width: 200px;
  transition:
    width 0.5s,
    min-width 0.5s,
    height 0.5s;
}
.kkhide {
  overflow: hidden;
  width: 77px;
  height: 40px;
  min-width: 40px;
  display: none !important;
}
.kk-sub-container {
  position: relative;
  width: 100%;
}
.zhedie {
  position: absolute;
  left: 6px;
  top: 6px;
  cursor: move;
}
.kk-yin {
  position: absolute;
  left: 40px;
  top: 6px;
  cursor: pointer;
}
.v-binder-follower-container {
  z-index: 99999 !important;
}
.n-form-item-feedback-wrapper {
  min-height: 10px;
}
.kk-index {
  padding: 10px 25px;
}
.n-form-item-feedback-wrapper {
  min-height: 10px !important;
}
.kk-h3 {
  color: #42b983;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  margin-bottom: 7px;
  font-size: 16px;
  user-select: none;
  border-bottom: 1px solid lightblue;
}
</style>
